<template>
	<view class="content">
		<Loading class="loading-box" v-show="!isLoading" :isStatus='loadStatus'></Loading>
		<cu-custom bgColor="uerHead1" :isBack="true" textRight="false" type="1">
			<block slot="backText" class="titilestyle">{{title}}</block>

		</cu-custom>

		<scroll-view scroll-y="true" :style="{height:swiperHeight+'px'}" v-if="isLoading">

			<view class="list-scroll-item">
				<view class="s-item-head  text-xl">
					<view class="basis-lg  margin-xs flex align-center text-over   text-xl">{{offInfo.name}}</view>
					<view
						class="basis-sm  margin-xs flex align-center text-over text-right text-xl  text-blue text-bold "
						v-if="offInfo.min_price">
						{{pricePrint(offInfo.min_price)}}-{{pricePrint(offInfo.max_price)}}
					</view>

				</view>
				<view class="s-item-head  text-xl">
					<view class="basis-xl  margin-xs flex align-center  text-xl">
						<view class='cu-tag radius tag-style' v-for="(tag,i) in item.skill" v-if="tag.length>0">{{tag}}
						</view>
						<view class='cu-tag radius tag-style'>{{item.school || "学历不限"}}</view>
					</view>
				</view>



			</view>

			<view class="inro-card" @click="jumpTo('company')" v-if="offInfo.company">
				<view class="flex  s-item-head  ">
					<view class="cu-avatar radius lg bg-brown" style="border-radius: 25rpx;"
						:style="{backgroundImage:'url('+isNull(offInfo.company.logo)+')'}">

					</view>
					<view class=" item-bottom text-cut flex flex-direction  justify-around">

						<view class="text-cut text-bold">{{offInfo.company.name}}</view>

						<view class="flex text-gray ">
							<view class="text-cut basis-xl text-over">{{offInfo.company.industry}}</view>
							<view class="basis-xs">
								| {{offInfo.company.min_scale}}-{{offInfo.company.max_scale}} 人</view>
						</view>

					</view>
					<text class="cuIcon-right text-gray padding-sm margin-auto"></text>


				</view>

			</view>

			<view class="inro-card">
				<text class="text-blod padding-sm text-blod">职位详情</text>
				<view class=" padding-sm">
					<wxParse :content="offInfo.desc"></wxParse>
				</view>

			</view>

			<view class="inro-card">
				<text class="text-blod padding-sm">公司地址</text>
				<view class="padding-sm text-gray">
					<text class="cuIcon-location"></text>{{offInfo.company.address || "暂无"}}
				</view>
				<map :id='myMap' class="map-box padding-sm" v-show="offInfo.company!=null"   :longitude="offInfo.company.lng" :latitude="offInfo.company.lat" :scale="scale" :markers="markers" show-location>
				
				
				</map>
				
				
				
				
			</view>
          
		
		</scroll-view>

		<view class=" bottom-btn bg-white  flex justify-around align-center radius " id="bottom">
			<button class="optn  middle" data-name="shareBtn" open-type="share"
				style="background-color: transparent;border: none;line-height: 1;color: #aaaaaa;">
				<text class="cuIcon-share"></text>
			</button>
			<button class="optn  middle"
				style="background-color: transparent;border: none;line-height: 1;color: #aaaaaa;" @click="collection()">
				<text class=" cuIcon-favorfill" :class="offInfo.is_collection?'text-red':'text-gray'"></text>
			</button>

			<view class="basis-df middle">
				<button type="" class="cu-btn  basis-xll text-xl bg-blue" @click="deliver()">

					<text class="cu-load load-cuIcon" :class="isLoad?'loading':'over'"></text> {{toudiTitle}}
				</button>
			</view>
		</view>


	</view>
</template>

<script>
	import wxParse from "@/components/gaoyia-parse/parse.vue"
	import PostList from "../../components/postList.vue"
	export default {
		components: {
			PostList,
			wxParse
		},
		data() {
			return {
				title: "岗位详情",
				cardCur: 0,
				dotStyle: false,
				towerStart: 0,
				direction: '',
				swiperList: [{
					id: 0,
					type: 'image',
					url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big84000.jpg'
				}, {
					id: 1,
					type: 'image',
					url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big37006.jpg',
				}, {
					id: 2,
					type: 'image',
					url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big39000.jpg'
				}],
				animationData: {},
				animation: null,
				deviceH: this.WH,
				isshowPost: false,
				swiperHeight: 0,
				offInfo: {},
				isLoading: false, //是否加载完成显示
				loadStatus: 'load',
				defalutLogo: "../../static/enter.png",
				isLoad: false,
				toudiTitle: "投递简历",
				longitude: "", //当前经纬度对
				latitude: "",
				markers: [], //单车数组
				//缩放比
				scale: 16,
				myMap: 'myMap',
				mapCtx: {},


			}
		},
		onLoad(option) {
			this.getOffInfo(option.offer_id);


		},
		onReady() {
			const query = uni.createSelectorQuery().in(this);
			query.select('#bottom').boundingClientRect(data => {
				this.getInfo().then((e) => {
					this.swiperHeight = e.screenHeight - (e.custom.top + e.custom.height);
				});
			}).exec();
			this.mapCtx = uni.createMapContext(this.myMap, this);

		},
		onShareAppMessage(res) {
			let dat = {
				params: '/app/Offer/pages/index/postInfo',
				id: this.offer_id,
				key: "offer_id"
			}
			return {
				title: "一舟校园-" + this.offInfo.name,
				path: "/pages/basic/basic?param=" + JSON.stringify(dat),
			}
		},
		mounted() {
			this.animation = uni.createAnimation({
				duration: 1000,
				timingFunction: 'ease'
			});
		},
		methods: {
			isNull(param) {
				return param ? param : this.defalutLogo;
			},
			pricePrint(num) {


				return num / 1000 + "k";

			},
			getOffInfo(offer_id) {
				this.apiRequest('/buyer/OfferInfo', {
					offer_id: offer_id
				}, "get", 0).then(res => {

					if (res.code == 200) {

						this.offInfo = res.data;
						(res.data.company!=null)?(()=>{
							let arr = {
							id: 1,
							width: 50,
							height: 50,
							latitude: this.offInfo.company.lat,
							longitude: this.offInfo.company.lng,
							iconPath: this.resDomain + "/Offer/static/enter.png",
							title: this.offInfo.company.name
						}
						this.markers.push(arr);
						})():"";
						
						
						(this.offInfo.is_post) ? this.toudiTitle = "已投递": "";
						this.isLoading = true;
					} else this.error();


				}).catch(() => {
					this.error();
				})
			},
			error() {
				uni.showModal({
					title: "温馨提示",
					content: "岗位不存在",
					showCancel: false,
					success: (e) => {
						uni.navigateBack({
							delta: 1
						})
					}
				})
			},
			cardSwiper(e) {
				this.cardCur = e.detail.current
			},
			ishowPost() {
				(this.isshowPost) ? (() => {
					this.isshowPost = false;
				})() : (() => {
					this.isshowPost = true;
				})();
			},
			/**
			 * 关闭动画
			 */
			closeShowAimation() {
				this.animation.bottom(-this.deviceH).step({
					duration: 200
				});
				this.animationData = this.animation.export();
			},
			/**
			 * 显示动画
			 */
			showAimation() {
				this.animation.bottom(0).step({
					duration: 500
				});
				this.animationData = this.animation.export();
				setTimeout(() => {
					this.isShowComment = true;
				}, 500)

			},

			/**
			 * 投递简历
			 */
			deliver() {
				if (this.isLoad || this.offInfo.is_post) {
					return false;
				}
				this.isLoad = true;
				this.toudiTitle = "投递中...";
				this.apiRequest('/buyer/OfferPostResume', {
					offer_id: this.offInfo.offer_id
				}, 0, "POST").then(res => {

					if (res.code == 200) {
						uni.showToast({
							title: "投递成功",
							icon: "success"
						})
						this.toudiTitle = "已投递";
						this.isLoad = false;

					} else {
						uni.showModal({
							title: "投递提示",
							content: res.msg,
							showCancel: false,
							success: (e) => {
								uni.navigateTo({
									url:"/app/Offer/pages/my/index"
								})

							}
						})
						this.toudiTitle = "投递简历";
						this.isLoad = false;
					}

				}).catch(() => {

				})

			},
			/**
			 * 收藏岗位
			 */
			collection() {
				this.apiRequest('/buyer/OfferCollection', {
					offer_id: this.offInfo.offer_id
				}, 1, "post").then(res => {
					if (res.code == 200) {
						(this.offInfo.is_collection) ? this.offInfo.is_collection = false: this.offInfo
							.is_collection = true;
					}
				}).catch(() => {

				})
			},

			/**
			 * @param {Object} type
			 */

			jumpTo(type) {
				switch (type) {
					case "company":
						uni.navigateTo({
							url: "./enterInfo?company_id=" + this.offInfo.company.company_id
						})

						break;


				}
			}
		}

	}
</script>

<style scoped>
	scroll-view{
		padding-bottom: 100px;
	}
	/**
	 * 卡片样式
	 */
	.inro-card {
		width: 92%;
		margin: 20upx auto;
		background: #FFFFFF;
		box-shadow: 0px 0px 10upx 0px rgba(0, 0, 0, 0.05);
		border-radius: 20upx;
		padding: 30upx;
		position: relative;
	}

	.info-card-head {
		width: fit-content;
		font-size: 32upx;
		font-weight: 800;
		color: #333333;
		position: relative;
		z-index: 2;
	}

	.info-head-mask {
		position: absolute;
		width: 80upx;
		height: 30upx;
		background: #DEEEFF;
		border-radius: 15px;
		bottom: -5upx;
		z-index: -1;
		right: -20upx;

	}

	.info-card-head1 {

		z-index: 2;
		position: relative;
	}

	.info-card-desc {
		margin-top: 10upx;
		width: 100%;
		display: flex;
		flex-direction: column;

	}

	.right {
		position: absolute;
		float: right;
		right: 15rpx;
	}


	/**
	 * 职位列表
	 */
	.postList {
		width: 100vw;
		height: 100vh;
		position: absolute;
		z-index: 99;

	}

	.postList .mask {
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
	}

	.post-content {
		width: 100vw;
		position: absolute;
		height: 80vh;
		bottom: 0;

	}

	.head-post {
		height: 100rpx;
		border-top-right-radius: 20rpx;
		border-top-left-radius: 20rpx;
	}

	.scroll-box {
		width: 100%;
		height: 100%;
		background-color: #F2F2F2;
	}

	.list-scroll-item {
		width: 92%;
		margin: 20upx auto;
		min-height: 200upx;
		background: #FFFFFF;
		margin-top: 20upx;
		box-shadow: 0px 0px 10upx 0px rgba(0, 0, 0, 0.05);
		border-radius: 20upx;
		display: flex;
		flex-direction: column;
		padding: 40upx 30upx;
	}

	.s-item-head {
		width: 100%;
		display: flex;
		flex-direction: row;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		font-size: 30upx;
		color: #333333;

	}

	.tag {
		margin-right: 10upx;
		border-radius: 4upx;
		font-size: 20upx;
		font-weight: bold;
		height: 40upx;
		min-width: 60upx;
		text-align: center;
	}

	.s-item-body {
		width: 100%;
		height: 40upx;
		margin-top: 10upx;
		line-height: 40upx;
		display: flex;
		flex-direction: row;
		position: relative;
	}

	.s-item-body-tab {
		width: 30%;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;

	}

	.text-gray {
		padding-right: 5upx;
		opacity: 0.5;
	}

	.s-item-body-right {
		position: absolute;
		float: right;
		right: 0;
		width: 40%;
		text-align: right;
	}

	.xinzi {
		font-size: 36upx;
		font-weight: 800;
		color: #1270E0;
		padding-right: 5upx;
	}

	.tag-style {
		color: #838383;
	}

	.bottom-btn {
		position: fixed;
		bottom: 3vh;
		width: 92vw;
		min-height: 120rpx;
		margin-left: 4vw;
		z-index: 99;
		padding: 10rpx;
		border-radius: 15rpx;

	}

	.bottom-btn view button {
		min-height: 90rpx;
	}

	.optn {
		background-color: rgba(0, 0, 0, 0);
		border: none;
		padding: 0;
		margin: 0;
		font-size: 60rpx;
	}

	.optn::after {
		border: none;
	}

	.text-over {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		display: block;
	}

	.margin-auto {
		margin: auto;
	}
	.map-box{
		width: 100%;
		height: 240rpx;
		margin: auto;
	}
</style>
<style lang="scss">
	.item-bottom {
		margin-left: 20rpx;
		width: 750*0.92-80-96rpx;
	}
</style>
